<template>
  <div class="setting">
    <div class="name">
      <div class="img c-testimg"></div>
      <div class="cont">
        <p>{{gname}}</p>
        <p class="id">ID&nbsp;:{{gid}}</p>
      </div>
      <a href="#" class="btn"><i class="icon-share"></i>分享群组</a>
    </div>

    <ul>
      <router-link to="" class="li" tag="li">
          我的群组名片
          <i class="icon-arrow1"></i>
          <span class="val">靖观天下</span>
      </router-link>
      <router-link to="" class="li" tag="li">
          查看群组资料
          <i class="icon-arrow1"></i>
          <span class="val">一小群</span>
      </router-link>
      <router-link to="" class="li" tag="li">
          群组成员
          <i class="icon-arrow1"></i>
          <span class="val">2133</span>
      </router-link>
      <router-link to="/setting/authority" tag="li" class="li" v-if="!isHost">
          群组权限详情
          <i class="icon-arrow1"></i>
      </router-link>
      <router-link to="/setting/authority" tag="li" class="li" v-if="isHost">
        群组权限设置
        <i class="icon-arrow1"></i>
      </router-link>
    </ul>
    <ul v-if="isHost">
      <li class="li">
        接收该群组主题动态
        <div class="button"></div>
      </li>
    </ul>

    <div class="tips">关闭后，只有@你的消息才接收</div>
    <ul class="invite">
      <router-link to="/setting/invite" tag="li" class="li">
        邀请嘉宾进群组
        <i class="ico icon-arrow1"></i>
      </router-link>
    </ul>

    <a href="#" class="btn-quit">退出群组</a>
  </div>
</template>

<script>
  export default {
    name: 'home',
    components:{
    },
    data () {
      return {
        gname:'一小群',
        gid:123456,
        isHost : true
      }
    },
    mounted (){

    },
    methods : {

    },
    beforeRouteUpdate (to, from, next) {
      next()
      this.type = this.$route.params.type;
    },
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import "../assets/css/common.scss";
  .setting{
    .name{padding:rem(65) rem(30); background:#fff; overflow:hidden; margin-bottom:rem(20); @include border-half-all($border,'bottom');
      .img{@include head(120); margin-right:rem(50);}
      .cont{float:left; color:$black-dark; font-size:rem(36); margin-top:rem(6);}
      .id{color:$black-light; font-size:rem(24); margin-top:rem(16);}
      .btn{float:right; margin-top:rem(6); width:rem(160); height:rem(50); border:$blue rem(1) solid; border-radius: 5px; font-size:rem(24); line-height:rem(55); text-align:center; color:$blue;
        i{display:inline-block; margin-right:rem(10);}
      }
    }
    ul{background:#fff; overflow:hidden; margin-bottom:rem(20); clear:both; font-size:rem(32);
      li{padding-right:rem(27); height:rem(100); line-height:rem(100); margin-left:rem(30); @include border-half-all($border,'bottom');
        &:last-child{
          &:before{display:none;}
        }
      }
      .val{color:$black-light; float:right; font-size:rem(28); margin-right:rem(7);}
      .icon-arrow1{color:$black-light; float:right; line-height: rem(100); font-size:rem(28)}
    }
    .invite{margin-bottom:rem(30);}
    .tips{color:$black-light; font-size:rem(28); padding-left:rem(30); padding-right:rem(28); margin-bottom:rem(40);}

    .btn-quit{display:block; background:#fff; text-align:center; font-size:rem(32); color:$black-dark; height:rem(100); line-height:rem(100);}
  }
</style>
